<table align="center" style="border: 1px solid #000;">
  <tr>
    <td align="center" colspan="2"><div id="titleObject"></div></td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td valign="top"><div id="territorySalesObject"></div></td>
        </tr>
        <tr>
          <td valign="top"><div id="productLineSalesObject"></div></td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td><div id="sampleObject"></div></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<script language="javascript" type="text/javascript">

  require(['cdf/Dashboard.Blueprint', 'cdf/components/CccBarChartComponent'],
    function(Dashboard, CccBarChartComponent) {

    var dashboard = new Dashboard();

    var testMeasureDiscrim = {
      "metadata":[
        {colName: "City",       colType: "STRING" },
        {colName: "Period",     colType: "STRING" },
        {colName: "Count",      colType: "NUMERIC"},
        {colName: "AvgLatency", colType: "NUMERIC"}
      ],
      resultset: [
        ['London', 'Jan', 35000,  141.3],
        ['London', 'Apr', 40000,  120.12],
        ['London', 'Jul', 45000,  115.6],
        ['London', 'Oct', null,   110.37],
        ['Paris',  'Jan', 70000,  null],
        ['Paris',  'Apr', 80000,  180.9],
        ['Paris',  'Jul', 115000, 170.7],
        ['Paris',  'Oct', 45000,  145.5],
        ['Lisbon', 'Jan', 70000,  200.7],
        ['Lisbon', 'Apr', 90000,  190.3],
        ['Lisbon', 'Jul', 120000, 180.2],
        ['Lisbon', 'Oct', 30000,  130.067]
      ]
    };

    var render_chart = new CccBarChartComponent({
      type: "cccBarChart",
      name: "cccChart",
      executeAtStart: false,
      htmlObject: "sampleObject",
      chartDefinition: {
        width:  600,
        height: 400,

        // Data source
        crosstabMode: false,

        //  map virtual item columns -> dimensions
        readers: ['city, period, count, avgLatency'],

        // Data
        dimensions: {
          count:      {format: "#,0"  },
          avgLatency: {format: "#,0.0"}
        },

        // Plots
        plots: [
          {
            name: 'main',
            visualRoles: {
              value:    'count',
              series:   'city',
              category: 'period'
            }
          },
          {
            type: 'point',
            linesVisible: true,
            dotsVisible:  true,
            orthoAxis: 2,
            colorAxis: 2,
            nullInterpolationMode: 'linear',
            visualRoles: {
              value: 'avgLatency',
              color: {legend: {visible: false}}
            }
          }
        ],

        // Cartesian axes
        axisGrid_strokeStyle: '#F7F8F9',
        axisLabel_font: 'normal 10px "Open Sans"',
        axisTitleLabel_font: 'normal 12px "Open Sans"',

        baseAxisTooltipAutoContent: 'summary',
        axisBandSizeRatio: 0.6,

        orthoAxisTitle:  "Count",
        orthoAxisOffset: 0.02,
        orthoAxisGrid:   true,

        ortho2AxisTitle: "Avg. Latency",

        // Color axes
        colors: [
          '#005CA7', '#FFC20F', '#333333'
        ],
        color2AxisTransform: function(c) { return c.brighter(0.5); },

        // Panels
        legend: true,
        legendFont: 'normal 11px "Open Sans"',

        // Chart/Interaction
        animate:    true,
        selectable: true,
        hoverable:  true,
        tooltipClassName: 'light',
        tooltipOpacity: 1
      }
    });

    dashboard.addComponent(render_chart);

    dashboard.postInit = function initDummyData() {
      render_chart.render(testMeasureDiscrim);
    };

    dashboard.init();
  });
</script>
